<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nairod chat</title>
<link  href="css/chatStyle.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery2-0-2.js"></script>
<script>
	$(document).ready(function(){
		$('#message').focus();
		callRefresh();
		window.setInterval(function(){
			callRefresh();
			}, 2000);
		$("#message").keypress(function(e) {
		    if(e.which == 13) {
		    	callAddMessage();
		    }
		});
	});
	function callAddMessage(){
		if($.trim($('#message').val()) != ""){
			$.ajax({
				url: "functions/addMessage.php",
				data: {message: $('#message').val(), user: $("#currentUser").val()},
				type: "POST"
				
			}).done(function(result){
				callRefresh();
				$('#message').val("");
			});
		}else{
			//Even if empty, let the message input focused
			$('#message').focus();
		}
		
	}
	function callRefresh(){
		$.ajax({
			url: "functions/refresh.php",
			type: "POST"
			
		}).done(function(result){
			$("#chatWindow").html(result);
			$("#chatWindow").prop({scrollTop: $("#chatWindow").prop("scrollHeight")});
			$('#message').focus();
		});
	}
</script>
</head>
<body>
<?php 
	session_start(); 
	echo "Logged as ".$_SESSION['login']." <a href='../login/logout.php'>logout</a>";
	echo "<input type='hidden' value='".$_SESSION['login']."' id='currentUser'/>";
?>
<h3>Nairod chat V1.0</h3>
<div id="chatWindow"></div>
<div id="inputMsg">
	<table>
		<tr>
			<td><label>Message</label></td>
			<td><input type="text" id="message" size="99"/></td>
			<td><input type="button" value="Submit" onclick="callAddMessage()"/></td>
		</tr>
	</table>
</div>
</body>
</html>